import { View } from "@tarojs/components";
import { Arrow, LocationOutlined } from "@taroify/icons";
import { Image } from "@taroify/core";
import { imgAddPrefix } from "@/utils";
import { useState } from "react";
import Taro, { useLoad } from "@tarojs/taro";
import { selectSectorPage } from "@/api";
import { ResponseListType } from "@/types/response";
import add from "@/assets/images/tabbar/add.png";
import BarCard2 from "./BarCardName2";

interface BarGridProps {
  title?: string;
  type?: "all" | "my";
  icon?: React.ReactNode;
  size?: number;
}

export default ({
  title = "我的吧",
  icon = <LocationOutlined size={20} color="#000" />,
  size = 50,
}: BarGridProps) => {
  const [bars, setBars] = useState<Array<any>>([]);
  useLoad(() => {
    selectSectorPage({ checkFlag: "1", pageNum: 1, pageSize: 1000 }).then(
      (res: ResponseListType) => {
        setBars(res.records);
      }
    );
  });
  return (
    <View>
      <View className="flex justify-between items-center mb-1">
        <View className="flex gap-1 items-center font-bold">
          {icon}
          {title}
        </View>
        <View className="flex items-center gap-1">
          <View className="text-xs text-gray-400">全部</View>
          <Arrow />
        </View>
      </View>
      <View className="grid grid-cols-2">
        <View
          onClick={() => Taro.navigateTo({ url: "/pages/create/bar" })}
          className="flex gap-2 items-center"
        >
          <Image
            className="rounded-xl"
            style={{ width: size, height: size }}
            src={add}
          />
          <View>
            <View className="font-semibold">创建吧</View>
            <View className="text-gray-400 text-sm">创建吧，做吧主</View>
          </View>
        </View>
        {bars.slice(0, 3).map((item, i) => (
          <BarCard2 key={i} {...item} />
        ))}
      </View>
    </View>
  );
};
